@charset "utf-8";

@keyframes c1{
    0%{
        left: -158px;
    }
    100%{
        left: 0;
    }
}
@keyframes c2{
    0%{
        color: #FFFFFF;
    }
    100%{
        color: #468bd9;
        background: #faf8f8;
    }
}
//详情页

.bigpic{
    width: 100%;
    height: 253px;
    overflow: hidden;
    img{
        width: 100%;
    }
}
.detail-item{
    height: 483px;
    width: 100%;
    background: #f6f6f6;
    >p{
        box-sizing: border-box;
        height: 29px;
        display: block;
        color: #3E3E3E;
        line-height: 12px;
        font-size: 12px;
        padding-top: 11px;
        padding-left: 166px;
        a{
            color: #3E3E3E;
        }
        a:hover{
            color: red;
        }
    }
    .detail-item-box{
        box-sizing: border-box;
        height: 413px;
        width: 1065px;
        margin-left: 157px;
        border-bottom: 1px #b4b4b4 solid;
        .detail-item-pic{
            box-sizing: border-box;
            width: 486px;
            height: 412px;
            border-right: 1px solid #b9b9b9;
            .detail-item-pic0{
                box-sizing: border-box;
                width: 485px;
                height: 322px;
                position: relative;
                img{
                    position: absolute;
                    top: -999px;
                    bottom: -999px;
                    left:-999px; 
                    right: -999px; 
                    margin: auto; 
                    max-height: 100%;
                    }
                .detail-item-picm{
                    width: 26px;
                    height: 22px;
                    position: absolute;
                    bottom: 16px;
                    right: 16px;
                }
            }
            .detail-item-pic1{
                box-sizing: border-box;
                width: 97px;
                height: 90px;
                border-top: 1px solid #b4b4b4;
                border-left: 1px solid #b4b4b4;
                float: left;
                position: relative;
                img{
                    position: absolute;
                    top: -999px;
                    bottom: -999px;
                    left:-999px; 
                    right: -999px; 
                    margin: auto; 
                    max-height: 100%;
                }
            }
        }
        .detail-item-text{
            box-sizing: border-box;
            width: 579px;
            height: 412px;
            text-align: justify;
            p:first-child{
                margin-top: 68px;
                margin-left: 62px;
                font-size: 24px;
                line-height: 24px;
                color: #468bd9;
            }
            p:nth-child(2){
                margin-top: 21px;
                margin-left: 63px;
                font-size: 22px;
                line-height: 22px;
                color: #000000;
            }
            p:nth-child(3){
                font-size: 17px;
                line-height: 17px;
                margin-top: 26px;
                margin-left: 63px;
            }
            >div{
                font-size: 12px;
                line-height: 21px;
                margin-top: 9px;
                margin-left: 63px;
            }
            a div{
                box-sizing: border-box;
                width: 169px;
                height: 50px;
                line-height: 50px;
                font-size: 20px;
                text-align: center;
                border-radius: 8px;
                background: #b5b5b5;
                color: #FFFFFF;
                margin-top: 28px;
                transition: 1s;
            }
            #buy{
                margin-right: 53px;
                margin-left: 68px;
            }
            
            #buy,a div:hover{
                background: #468bd9;
                color: #FFFFFF;
                
            }
        }
    }
}

.detail-content{
    .detail-title{
        height: 100px;
        width: 100%;
        background: #b5b5b5;
        .detail-title1{
            width: 94px;
            height: 100px;
            float: left;
            margin-right: 64px;
            font-size: 20px;
            line-height: 94px;
            text-align: center;
            color: #FFFFFF;
            position: relative;
        }
        a:first-of-type div{
            margin-left: 184px;
        }
        .detail-active,.detail-title1:hover{
            color: #468bd9;
            background: #faf8f8;
          
        }
        .detail-title1:hover{
            animation: c2 0.5s;
        }
        .detail-active:after,.detail-title1:hover:after{
            position: absolute;
            content: "";
            border-bottom: #3c9cd3 4px solid;
            width: 94px;
            bottom: 0;
            left: 0;
            
        }
        .detail-title1:hover:after{
            animation: c1 0.5s;
        }
    }
    .detail-describe{
        img{
            transition: 1s;
        }
        img:hover{
            transform: scale(1.2);
        }
        width: 100%;
        height: auto;
        .describe1{
            box-sizing: border-box;
            height: 600px;
            width: 800px;
            margin: 0 auto;
            text-align: center;
            p:first-of-type{
                font-size: 32px;
                line-height: 32px;
                color: #0b5ae4;
            }
            p:nth-of-type(2){
                font-size: 12px;
                line-height: 12px;
                color: #b6b6b6;
                margin-top: 12px;
                margin-bottom: 12px;
            }
            p:last-of-type{
                font-size: 12px;
                line-height: 21px;
                color: #909090;
            }
        }
        .describe1:first-child{
            padding-top: 72px;
            .describe1-pic{
                box-sizing: border-box;
                height: 420px;
                width: 800px;
               
                img:first-child{
                    padding-top: 140px;
                    padding-left: 120px;
                }
                img:nth-of-type(2){
                    padding-top: 50px;
                }
            }
            
        }
        .describe1:nth-child(2){
            height: auto;
            .describe1-pic{
                width: 747px;
                height: 602px;
                margin-top: 33px;
                img{
                    width: 100%;
                }
            }
        }
        .describe1:nth-child(3){
            height: auto;
            .describe1-pic{
                width: 737px;
                height: 463px;
                margin-top: 30px;
                img{
                    width: 100%;
                }
            }
        }
        .describe1:nth-child(4){
            height: auto;
            .describe1-pic{
                width: 759px;
                height: 649px;
            }
        }
    }
    .parameter-pic{
        width: 800px;
        height: auto;
        margin: 0 auto;
    }
    .detail-more{
        .more-box{
            height: 170px;
            width: 930px;
            margin: 70px auto 115px;
            
            li{
               height: 170px;
               width: 130px;
               float: left;
               margin-right: 70px;
               transition: 1s;
               a{
                  display: inline-block;
               }
            }
            li:hover{
                transform: scale(1.2);
            }
            li:last-child{
                margin-right: 0;
            }
        }
    }
    
}
